<template>
    <view style="height: 100%">
        <!-- pages/Myblog/Myblog.wxml -->
        <input type="text" class="header-input" placeholder="搜索发帖内容" placeholder-style="font-size:26rpx;text-align:center;" @input="handleInputChange" />
        <view class="divLine"></view>
        <view class="item" :data-sign="item.title" @tap="handlePage" v-for="(item, index) in searchList ? searchList : blogs" :key="index">
            <image class="item-image" :src="item.img"></image>

            <view class="item-content">
                <view class="item-content-title">{{ item.title }}</view>
                <text class="item-content-tags-content">{{ item.area }}</text>
                <text class="item-content-tags-content">{{ item.time }}</text>
            </view>
        </view>
    </view>
</template>

<script>
// pages/Myblog/Myblog.js
export default {
    data() {
        return {
            blogs: [
                {
                    title: 'textOne',
                    time: '2021-01-01',
                    area: '失物招领',
                    img: '/static/resource/职业.png'
                },
                {
                    title: 'textTwo',
                    time: '2021-01-01',
                    area: '贝果集市',
                    img: '/static/resource/职业.png'
                },
                {
                    title: 'textThree',
                    time: '2021-01-01',
                    area: '失物招领',
                    img: '/static/resource/职业.png'
                }
            ],
            searchList: null
        };
    },
    methods: {
        handleInputChange(e) {
            const value = e.detail.value;
            let searchList = null;
            if (value) {
                searchList = this.blogs.filter((item) => item.title.indexOf(value) > -1 || item.time.indexOf(value) > -1 || item.area.indexOf(value) > -1);
            }
            this.setData({
                searchList
            });
        }
    }
};
</script>
<style>
/* pages/Myblog/Myblog.wxss */
.header-input {
    border: 1rpx solid #a0a7ad;
    margin: 22rpx 36rpx 35rpx 36rpx;
    line-height: 75rpx;
    border-radius: 36rpx;
    padding: 0 36rpx;
}
.divLine {
    background: #a8a8a4;
    width: 850rpx;
    height: 5rpx;
}
.item {
    display: flex;
    margin-top: 16rpx;
}
.item-image {
    width: 208rpx;
    height: 150rpx;
    border-radius: 16rpx;
    margin-left: 24rpx;
}
.item-content {
    flex: 1;
    margin-left: 24rpx;
    border-bottom: 1rpx solid #d9dde1;
    margin-right: 40rpx;
}
.item-content-title {
    line-height: 48rpx;
    font-size: 32rpx;
    columns: #282828;
    font-weight: bold;
}
.item-content-tags-content {
    font-size: 24rpx;
    line-height: 16rpx;
    color: #f1b1b1;
    font-weight: bold;
    margin-right: 18rpx;
}
</style>
